import img from "../../assets/mylib.png"

const OrderItem = () => {

    return (
        <>
            <div>
            <span className="badge p-2 ps-3 pe-3 me-0 mt-2 ms-3 rounded-pill text-center">
                Order №2314142</span>
                <span className="badge p-2 ps-3 pe-3 me-0 mt-2 ms-3 rounded-pill">Borrow</span>
                <span className="badge p-2 ps-3 pe-3 me-0 mt-2 ms-3 rounded-pill" id={"badge-date"}>12.02.2004</span>

            </div>
            <div className={"row-cols-auto d-flex flex-row p-2 order-item-container"}>


                <img src={img} width={250} height={250}/>

                <div className={"mt-1"}>

                    <p className="card-text mb-0" id={"order-item-title"}>The Count of Monte Cristo</p>
                    <p className="text-secondary p-0 mt-1 mb-0">Alexandre Dumas</p>
                    <p className="text-secondary p-0 mt-1 mb-0">Book №23402</p>
                    <p className="text-secondary p-0 mt-1  mb-0">Condition: Scratched, almost new</p>
                    <p className="text-secondary p-0 mt-1  mb-0">Address: Railway Campus, Building 1</p>


                </div>
                <div>
                             <span className="badge p-2 ps-3 pe-3 me-0 mt-2 ms-3 rounded-pill text-center">
               1</span>

                </div>

                <div className={"order-item-control"}>
                    <button className={"btn rounded-5 outlined-button me-2 btn-outline-secondary button-order"}>
                        Return
                    </button>
                    <button className={"btn rounded-5 outlined-button me-2 btn-outline-secondary button-order"}>
                        Claim lost
                    </button>


                </div>


            </div>
            <div className={"row-cols-auto d-flex flex-row p-2 order-item-container"}>


                <img src={img} width={250} height={250}/>

                <div className={"mt-1"}>

                    <p className="card-text mb-0" id={"order-item-title"}>The Count of Monte Cristo</p>
                    <p className="text-secondary p-0 mt-1 mb-0">Alexandre Dumas</p>
                    <p className="text-secondary p-0 mt-1 mb-0">Book №23402</p>
                    <p className="text-secondary p-0 mt-1  mb-0">Condition: Scratched, almost new</p>
                    <p className="text-secondary p-0 mt-1  mb-0">Address: Railway Campus, Building 1</p>


                </div>
                <div>
                             <span className="badge p-2 ps-3 pe-3 me-0 mt-2 ms-3 rounded-pill text-center">
               1</span>

                </div>

                <div className={"order-item-control"}>
                    <button className={"btn rounded-5 outlined-button me-2 btn-outline-secondary button-order"}>
                        Return
                    </button>
                    <button className={"btn rounded-5 outlined-button me-2 btn-outline-secondary button-order"}>
                        Claim lost
                    </button>


                </div>


            </div>




        </>

    )
}

export default OrderItem